<template>
  <div class="rich_content posterPG">
    <div class="tb-best nopaddingover">
      <swiper class="home_swiper"
              :previous-margin="previousMargin"
              :next-margin="nextMargin"
              :circular="circular"
              @change="handleChange($event)">
        <block v-for="(item, index) in datalist" :key="index">
          <swiper-item>
            <div :class="curIndex===index ? 'active_item' : 'item'" :animation="index == curIndex ? animationData : animationData2">
              <!-- 卡片项，写在子组件中 -->
              <img :src="item.coverImg" />
            </div>
          </swiper-item>
        </block>
      </swiper>
      <!-- 指示点 -->
      <div class="swiper_dot_wrap">
        <ul>
          <li v-for="(item, index) in datalist" :key="index" :class="{'active':curIndex === index}"></li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>

import {API} from "../../api";
import {hideLoading, showLoading} from "../../api/wechat";
import {showToast} from "../../utils";
export default {
  data () {
    return {
      curIndex: 0,
      datalist: [{
        coverImg: 'https://oss.ido.icu/static/uploads/images/f3d1002fcdff7c1e1b0ad70fde2d74fb.jpg?x-oss-process=imgalias/thumb',
        title: '摩尔曼斯克',
        desc: '摩尔曼斯克，北极圈内最大的城市，离芬兰也就半小时车程，整个城市才从极夜的天气中浮上来，太阳还未能升出地平线，城市只能靠云层的反射借光，一天只有几个小时的光亮，但红霞会持续一整天时间。'
      }, {
        coverImg: 'https://oss.ido.icu/static/uploads/images/f3d1002fcdff7c1e1b0ad70fde2d74fb.jpg?x-oss-process=imgalias/thumb',
        title: '安纳托利亚往事',
        desc: '摩尔曼斯克2，北极圈内最大的城市，离芬兰也就半小时车程，整个城市才从极夜的天气中浮上来，太阳还未能升出地平线，城市只能靠云层的反射借光，一天只有几个小时的光亮，但红霞会持续一整天时间。'
      }, {
        coverImg: 'https://oss.ido.icu/static/uploads/images/f3d1002fcdff7c1e1b0ad70fde2d74fb.jpg?x-oss-process=imgalias/thumb',
        title: '圣彼得堡是另一个阿姆斯特丹',
        desc: '摩尔曼斯克3，北极圈内最大的城市，离芬兰也就半小时车程，整个城市才从极夜的天气中浮上来，太阳还未能升出地平线，城市只能靠云层的反射借光，一天只有几个小时的光亮，但红霞会持续一整天时间。'
      }],
      circular: true, // 设置衔接滑动
      previousMargin: '63rpx',
      nextMargin: '63rpx',
      animationData: {}, // 卡片放大动画
      animationData2: {} // 卡片缩小动画
    }
  },

  components: {
  },
  mounted() {

  },

  methods: {
    handleChange (e) {
      this.curIndex = e.mp.detail.current
      this.changeActive()
      this.changeNormal()
    },
    // 收缩
    changeNormal () {
      var animation2 = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease'
      })
      this.animation2 = animation2
      animation2.scale(0.9).opacity(0.3).step()
      this.animationData2 = animation2.export()
    },
    // 展开
    changeActive () {
      var animation = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease'
      })
      this.animation = animation
      animation.scale(1).opacity(1).step()
      this.animationData = animation.export()
    }
  },

  created () {

  }
}
</script>

<style scoped>
.posterPG{
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(0deg,rgba(250,181,174,1) 0%,rgba(252,197,200,1) 100%);

}
.tb-best{
  position: relative;
  height: 600px;
}
.tb-best:before{content:'';display:table;}
.home_swiper {
  margin-top: 100px;
  position: relative;
  width: 100%;
  height: 438px !important;
}
.item{
  transform: scale(0.9);
  transform-origin: 50% 50% 0px;
  opacity: 0.3;
}
.active_item{
  transform: scale(1);
  opacity: 1;
}

 .swiper_dot_wrap {
   position: absolute;
   top: 25px;
   right: 32.5px;
   width: 100px;
   height: 7.5px;
 }
.swiper_dot_wrap ul {
  float: right;
  overflow: hidden;
}
.swiper_dot_wrap ul li {
  float: left;
  width: 7.5px;
  height: 7.5px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid #b99c6d;
  margin-right: 7.5px;
}
.swiper_dot_wrap ul li:last-child{
   margin-right: 0px;
}
.swiper_dot_wrap ul li.active{
   background: #b99c6d;
}


</style>
